<template>
  <aside class="md-layout-sidebar">
    <ul>
      <li v-for="item in menus" :key="item.value" :class="[current===item.path?'current':'']" @click="handleRouter(item)">
        <i :class="item.icon"></i>{{item.label}}<b class="icon-drop_right"></b>
      </li>
    </ul>
  </aside>
</template>

<script>
export default {
  name: 'MdLayoutSidebarComponent',
  data () {
    return {
      current: null,
      menus: [
        {
          value: 1,
          label: '观看记录',
          path: '/manage/guankanjilu',
          icon: 'imv2-play_circle'
        },
        {
          value: 2,
          label: '收藏记录',
          path: '/manage/shoucangjilu',
          icon: 'imv2-star-revert'
        },
        {
          value: 3,
          label: '答题记录',
          path: '/manage/datijilu',
          icon: 'imv2-nav_note'
        },
        {
          value: 4,
          label: '个人资料',
          path: '/manage/gerenziliao',
          icon: 'imv2-list_bulleted'
        },
        {
          value: 5,
          label: '酷学证书',
          path: '/manage/zhengshu',
          icon: 'el-icon-reading'
        }
      ]
    }
  },
  watch: {
    $route: {
      handler (route) {
        this.handleSetMenuCurrent(route)
      }
    }
  },
  mounted () {
    this.handleSetMenuCurrent(this.$route)
  },
  methods: {
    handleSetMenuCurrent (route) {
      console.log(route)
      this.current = route.path
    },
    handleRouter (item) {
      this.$router.push(item.path)
    }
  }
}
</script>

<style lang="less" scoped>
.md-layout-sidebar {
  width: @md-manage-sidebar-width;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;

  ul {
    li {
      width: 100%;
      line-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 16px;
      text-align: center;
      color: #787d82;
      position: relative;
      margin-bottom: 10px;
      cursor: pointer;

      &.current {
        background-color: rgba(240, 20, 20, 0.8);
        border-radius: 8px 0px 0px 8px;
        color: #fff;
        i {
          color: #fff;
        }
        b {
          display: block;
          content: '';
          position: absolute;
          bottom: 0;
          right: 0;
          width: 0;
          height: 0;
          border-top: 24px solid #f8fafc;
          border-bottom: 24px solid #f8fafc;
          border-left: 15px solid transparent;
        }
      }
      i {
        font-size: 20px;
        color: #93999f;
        margin-right: 10px;
      }
      b {
        display: none;
      }
    }
  }
}
</style>
